<template>
    <div class="NavigationTitle">
        <div class="NavigationTitle-left">
            <h2>{{ TitleData.h1 }}</h2>
        </div>
        <div class="NavigationTitle-right">
            <div v-for="(item, index) in TitleData.list" :key="index" @mouseenter="Itemmouseenter(item, index)"
                @mouseleave="Itemmouseout">
                <div class="NavigationTitle-right-item" :class="index === BrightIndex ? 'itemon' : ''">
                    <span> {{ item.con ? '' : item.title }}</span>
                    <el-dropdown @command="handleCommand(false, index)" v-if="item.con" :teleported="false">
                        <span class="el-dropdown-link" :style="commandText ? { color: 'blue', fontWeight: 'bold' } : ''">
                            {{ commandText ? commandText : item.title }}<el-icon
                                class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleCommand(dropdowntem)"
                                    v-for="(dropdowntem, dropdownindex) in item.con" :key="dropdownindex">{{ dropdowntem
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';

// 引入props和emits
const Props = defineProps(['TitleData']);
const { TitleData }: object | any = toRefs(Props);
const Emit = defineEmits(['chiincident']);
// 定义一个变量，用于存储当前鼠标悬停的索引
const BrightIndex: number | any = ref(0);
// 定义一个变量，用于存储当前鼠标悬停的索引
const previous = ref(0);
// 定义一个变量，用于储存定时器
let TimeOut: any;
// 分类菜单渲染数据
const commandText = ref();


// 定义一个函数，用于处理命令
const handleCommand = (command: string | number | object | boolean, index?: number | any) => {
    if (command) {
        // 触发emits中的chiincident事件，并传入参数command
        Emit('chiincident', command);
        // 渲染
        commandText.value = command;
        // 高亮
        previous.value = index;
    }
};


Emit('chiincident', TitleData.value.list[BrightIndex.value].title);


// 定义一个函数，用于处理鼠标悬停事件
const Itemmouseenter = (item: object | any, index: number) => {
    // 如果当前项的title为“更多分类”，则不触发事件
    if (item.title !== '更多分类') {
        // 设置延时，1秒后触发事件
        TimeOut = setTimeout(() => {
            // 设置上一次高亮项的索引
            previous.value = index;
            // 设置当前高亮项的索引
            BrightIndex.value = index;
            // 触发事件
            Emit('chiincident', item.title);
            // 清除延时
            clearTimeout(TimeOut);
            // 删除分类高亮
            commandText.value = false;
        }, 1000);
    }
};
// 定义一个函数，用于处理鼠标离开事件
const Itemmouseout = () => {
    // 清除延时
    clearTimeout(TimeOut);
    // 设置上一次高亮项的索引
    BrightIndex.value = previous.value;
};
</script>

<style scoped lang="scss">
.NavigationTitle {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;

    .NavigationTitle-left {
        width: auto;
        height: 100%;
        margin-right: 50px;
    }

    .NavigationTitle-right {
        min-width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .NavigationTitle-right-item {
            cursor: pointer;
            min-width: 90px;
            height: 30px;
            background: #F3F4F7;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: black;
        }


        .itemon {
            font-weight: bold;
            color: blue;
        }

        .NavigationTitle-right-item:hover {
            font-weight: bold;
            color: blue;
        }

        .el-dropdown-link {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            min-width: 100px;
            color: black;
        }

        .el-dropdown-link:hover {
            font-weight: bold;
            color: blue;
        }

        .el-tooltip__trigger:focus-visible {
            outline: unset !important;
        }
    }
}
</style>